<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.移动端开发，视口必须写好 布局的大小为当前设备的独立像素的宽度 完美的布局 1. 滚动条 2. 不会缩放 -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--2.样式重置-->
    <link rel="stylesheet" href="./css/reset.css">
    <!--3. 公共的css-->
    <link rel="stylesheet" href="./css/common.css">
    <!--4. 自己页面的css文件-->
    <link rel="stylesheet" href="./css/index.css">

    <title>知识付费移动端-首页</title>
</head>
<body>
<!--5. 页面布局实操-->
<!--5.1 banner区域 通栏-->
<div class="banner">
    <img src="./imgs/banner1.jpg" alt="">
</div>
<!--5.2 免费专区-->
<div class="free">
    <div class="free-hd">
        <h2>免费专题</h2>
        <a href="#">查看全部 &gt;</a>
    </div>
    <ul class="free-content">
        <li class="item">
            <div class="cover">
                <img src="./imgs/p1.jpg" alt="">
            </div>
            <div class="info">
                <h2 class="title">糖尿病治疗专题</h2>
                <p class="short-cut">
                    由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                </p>
                <p class="price">¥0.00</p>
            </div>
        </li>

        <li class="item">
            <div class="cover">
                <img src="./imgs/p3.jpg" alt="">
            </div>
            <div class="info">
                <h2 class="title">糖尿病治疗专题</h2>
                <p class="short-cut">
                    由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                </p>
                <p class="price">¥0.00</p>
            </div>
        </li>

        <li class="item">
            <div class="cover">
                <img src="./imgs/p2.jpg" alt="">
            </div>
            <div class="info">
                <h2 class="title">糖尿病治疗专题</h2>
                <p class="short-cut">
                    由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                </p>
                <p class="price">¥0.00</p>
            </div>
        </li>
    </ul>
</div>
<!--5.3 专栏订阅-->
<div class="free mb60">
    <div class="free-hd">
        <h2>专栏订阅</h2>
        <a href="#">查看全部 &gt;</a>
    </div>
    <ul class="free-content">
        <li class="item">
            <div class="cover">
                <img src="./imgs/p5.jpg" alt="">
            </div>
            <div class="info">
                <h2 class="title">糖尿病治疗专题</h2>
                <p class="short-cut">
                    由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                </p>
                <p class="price">¥0.00</p>
            </div>
        </li>

        <li class="item">
            <div class="cover">
                <img src="./imgs/p5.jpg" alt="">
            </div>
            <div class="info">
                <h2 class="title">糖尿病治疗专题</h2>
                <p class="short-cut">
                    由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                </p>
                <p class="price">¥0.00</p>
            </div>
        </li>

        <li class="item">
            <div class="cover">
                <img src="./imgs/p2.jpg" alt="">
            </div>
            <div class="info">
                <h2 class="title">糖尿病治疗专题</h2>
                <p class="short-cut">
                    由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                </p>
                <p class="price">¥0.00</p>
            </div>
        </li>
    </ul>
</div>
<!--5.4 底部的 tabbar-->
<div class="footer">
    <a href="#" class="active">
        <img src="./imgs/ft1.jpg" alt="">
        学一学
    </a>
    <a href="#">
        <img src="./imgs/ft2.jpg" alt="">
        已购
    </a>
    <a href="#">
        <img src="./imgs/ft3.jpg" alt="">
        我的
    </a>
</div>
</body>
<script>
    // 1. 接口文档 2. 发送ajax
</script>
</html>
